<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue综合练习</title>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }

    table tr {
        border: 0;
    }

    table td {
        border: 1px solid #000;
    }

    tbody, table, tr {
        padding: 0;
        margin: 0;
        border: 0;
    }

    .btn {
        width: 50px;
        height: 20px;
        text-align: center;
        background: #42B983;
        border-radius: 4px;
        line-height: 20px;
        color: #fff;
        font-size: 12px;
        margin: 0 auto;
        cursor: pointer;
    }

    #createNewPerson {
        width: 400px;
        border: 1px solid #000;
    }

    table {
        width: 100%;
    }

    table tr:first-child td {
        background: #42B983;
    }

    .info {
        width: 100%;
        padding: 0 0 0 100px;
    }
</style>
<div id="createNewPerson" v-cloak>
    <div class="info">
        <p>Name:<input type="text" v-model="newperson.name"></p>

        <p>Age:<input type="text" v-model="newperson.age"></p>

        <p>Sex:<select v-model="newperson.sex">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select></p>


    </div>
    <div @click="createNewPerson" class="btn">Create</div>
    <table>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Sex</td>
            <td>Operate</td>
        </tr>
        <tr v-for="(person,index)  in people">
            <td>{{person .name}}</td>
            <td>{{person .age}}</td>
            <td>{{person .sex}}</td>
            <td>
                <button @click="deletePerson(index)" class="btn">Delete</button>
            </td>
        </tr>
    </table>
</div>
<script src="../modules/vue.js"></script>
<script>

    var appData = {}

    var vm = new Vue({
        el: '#createNewPerson',
        data: {
            newperson: {
                name: '',
                age: '',
                sex: 'Male'
            },
            people: [{
                name: 'Jack',
                age: 30,
                sex: 'Male'
            }, {
                name: 'Bill',
                age: 26,
                sex: 'Male'
            }, {
                name: 'Tracy',
                age: 22,
                sex: 'Female'
            }, {
                name: 'Chris',
                age: 36,
                sex: 'Male'
            }]
        },
        methods: {
            createNewPerson: function () {
                this.people.push(this.newperson);
                this.newperson = {
                    name: '',
                    age: '',
                    sex: 'Male'
                }
            },
            deletePerson: function (index) {
                console.log(index);
                this.people.splice(index, 1);
            }
        }
    })
</script>
</body>
</html>